<template>
  <div class="store-staff">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">👨‍💼 门店员工管理</span>
          <div class="header-actions">
            <el-button type="success" @click="handleImport">
              <el-icon><Upload /></el-icon>
              批量导入
            </el-button>
            <el-button type="primary" @click="handleAdd">
              <el-icon><Plus /></el-icon>
              新增员工
            </el-button>
          </div>
        </div>
      </template>

      <!-- 搜索区域 -->
      <el-form :inline="true" class="search-form">
        <el-form-item label="所属门店">
          <el-select v-model="searchForm.storeId" placeholder="请选择门店" clearable>
            <el-option label="深圳旗舰店" value="1" />
            <el-option label="上海陆家嘴店" value="2" />
            <el-option label="北京国贸店" value="3" />
            <el-option label="广州天河店" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="员工姓名">
          <el-input v-model="searchForm.name" placeholder="请输入员工姓名" clearable />
        </el-form-item>
        <el-form-item label="职位">
          <el-select v-model="searchForm.position" placeholder="请选择职位" clearable>
            <el-option label="店长" value="manager" />
            <el-option label="副店长" value="vice_manager" />
            <el-option label="销售顾问" value="salesperson" />
            <el-option label="收银员" value="cashier" />
            <el-option label="库管员" value="warehouse" />
          </el-select>
        </el-form-item>
        <el-form-item label="在职状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="在职" value="active" />
            <el-option label="离职" value="inactive" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 统计卡片 -->
      <el-row :gutter="20" class="stat-cards">
        <el-col :xs="12" :sm="6">
          <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
              <el-icon :size="32"><User /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-label">员工总数</div>
              <div class="stat-value">{{ totalStaff }}</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6">
          <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
              <el-icon :size="32"><CircleCheck /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-label">在职人数</div>
              <div class="stat-value active">{{ activeStaff }}</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6">
          <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
              <el-icon :size="32"><Star /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-label">本月新增</div>
              <div class="stat-value new">+{{ newStaff }}</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6">
          <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-label">平均业绩</div>
              <div class="stat-value sales">¥{{ avgSales.toLocaleString() }}</div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 员工列表 -->
      <el-table :data="tableData" border stripe>
        <el-table-column prop="id" label="工号" width="100" />
        <el-table-column prop="name" label="姓名" width="120">
          <template #default="{ row }">
            <div class="staff-name-cell">
              <el-avatar :size="35" :src="row.avatar" />
              <span class="staff-name">{{ row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="storeName" label="所属门店" width="150" />
        <el-table-column prop="position" label="职位" width="120">
          <template #default="{ row }">
            <el-tag :type="getPositionTag(row.position)">
              {{ getPositionName(row.position) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="130" />
        <el-table-column prop="entryDate" label="入职日期" width="120" />
        <el-table-column prop="workYears" label="司龄(年)" width="90" align="center" />
        <el-table-column prop="monthlySales" label="本月销售" width="120" align="right">
          <template #default="{ row }">
            <span class="sales-amount">¥{{ row.monthlySales.toLocaleString() }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="monthOrderCount" label="本月订单" width="100" align="center" />
        <el-table-column prop="satisfaction" label="满意度" width="130">
          <template #default="{ row }">
            <el-rate v-model="row.satisfaction" disabled show-score text-color="#ff9900" />
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'active' ? 'success' : 'info'">
              {{ row.status === 'active' ? '在职' : '离职' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleView(row)">详情</el-button>
            <el-button link type="success" @click="handlePerformance(row)">业绩</el-button>
            <el-button link type="warning" @click="handleEdit(row)">编辑</el-button>
            <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSearch"
        @current-change="handleSearch"
      />
    </el-card>

    <!-- 新增/编辑员工对话框 -->
    <el-dialog 
      v-model="dialogVisible" 
      :title="dialogTitle"
      width="700px"
    >
      <el-form :model="formData" :rules="formRules" ref="formRef" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="员工姓名" prop="name">
              <el-input v-model="formData.name" placeholder="请输入员工姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工号" prop="id">
              <el-input v-model="formData.id" placeholder="自动生成" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属门店" prop="storeId">
              <el-select v-model="formData.storeId" placeholder="请选择门店" style="width: 100%">
                <el-option label="深圳旗舰店" value="1" />
                <el-option label="上海陆家嘴店" value="2" />
                <el-option label="北京国贸店" value="3" />
                <el-option label="广州天河店" value="4" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职位" prop="position">
              <el-select v-model="formData.position" placeholder="请选择职位" style="width: 100%">
                <el-option label="店长" value="manager" />
                <el-option label="副店长" value="vice_manager" />
                <el-option label="销售顾问" value="salesperson" />
                <el-option label="收银员" value="cashier" />
                <el-option label="库管员" value="warehouse" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="formData.phone" placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model="formData.idCard" placeholder="请输入身份证号" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="入职日期" prop="entryDate">
              <el-date-picker
                v-model="formData.entryDate"
                type="date"
                placeholder="选择日期"
                value-format="YYYY-MM-DD"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="基本工资" prop="baseSalary">
              <el-input-number v-model="formData.baseSalary" :min="0" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="在职状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio label="active">在职</el-radio>
            <el-radio label="inactive">离职</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            v-model="formData.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus, Upload, User, CircleCheck, Star, TrendCharts
} from '@element-plus/icons-vue'

// 搜索表单
const searchForm = reactive({
  storeId: '',
  name: '',
  position: '',
  status: ''
})

// 统计数据
const totalStaff = ref(156)
const activeStaff = ref(142)
const newStaff = ref(8)
const avgSales = ref(185678)

// 表格数据
const tableData = ref([
  {
    id: 'E001',
    name: '张伟',
    storeName: '深圳旗舰店',
    position: 'manager',
    phone: '13800138001',
    entryDate: '2020-01-15',
    workYears: 4,
    monthlySales: 456789,
    monthOrderCount: 89,
    satisfaction: 4.8,
    status: 'active',
    avatar: 'https://via.placeholder.com/35'
  },
  {
    id: 'E002',
    name: '李芳',
    storeName: '深圳旗舰店',
    position: 'salesperson',
    phone: '13800138002',
    entryDate: '2020-03-20',
    workYears: 4,
    monthlySales: 398765,
    monthOrderCount: 76,
    satisfaction: 4.9,
    status: 'active',
    avatar: 'https://via.placeholder.com/35'
  },
  {
    id: 'E003',
    name: '王强',
    storeName: '上海陆家嘴店',
    position: 'vice_manager',
    phone: '13800138003',
    entryDate: '2019-11-01',
    workYears: 5,
    monthlySales: 512345,
    monthOrderCount: 92,
    satisfaction: 4.7,
    status: 'active',
    avatar: 'https://via.placeholder.com/35'
  },
  {
    id: 'E004',
    name: '陈敏',
    storeName: '北京国贸店',
    position: 'salesperson',
    phone: '13800138004',
    entryDate: '2021-05-10',
    workYears: 3,
    monthlySales: 287654,
    monthOrderCount: 65,
    satisfaction: 4.6,
    status: 'active',
    avatar: 'https://via.placeholder.com/35'
  },
  {
    id: 'E005',
    name: '刘洋',
    storeName: '广州天河店',
    position: 'cashier',
    phone: '13800138005',
    entryDate: '2021-08-15',
    workYears: 2,
    monthlySales: 156789,
    monthOrderCount: 58,
    satisfaction: 4.5,
    status: 'inactive',
    avatar: 'https://via.placeholder.com/35'
  }
])

// 分页
const pagination = reactive({
  page: 1,
  size: 10,
  total: 5
})

// 对话框
const dialogVisible = ref(false)
const dialogTitle = computed(() => formData.id ? '编辑员工' : '新增员工')
const formRef = ref(null)

// 表单数据
const formData = reactive({
  id: null,
  name: '',
  storeId: '',
  position: '',
  phone: '',
  idCard: '',
  entryDate: '',
  baseSalary: 0,
  status: 'active',
  remark: ''
})

// 表单验证规则
const formRules = {
  name: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
  storeId: [{ required: true, message: '请选择所属门店', trigger: 'change' }],
  position: [{ required: true, message: '请选择职位', trigger: 'change' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
  ]
}

// 获取职位标签
const getPositionTag = (position) => {
  const map = {
    manager: '',
    vice_manager: 'success',
    salesperson: 'primary',
    cashier: 'warning',
    warehouse: 'info'
  }
  return map[position] || 'info'
}

// 获取职位名称
const getPositionName = (position) => {
  const map = {
    manager: '店长',
    vice_manager: '副店长',
    salesperson: '销售顾问',
    cashier: '收银员',
    warehouse: '库管员'
  }
  return map[position] || position
}

// 搜索
const handleSearch = () => {
  console.log('搜索:', searchForm)
  ElMessage.success('查询成功')
}

// 重置
const handleReset = () => {
  searchForm.storeId = ''
  searchForm.name = ''
  searchForm.position = ''
  searchForm.status = ''
  handleSearch()
}

// 新增
const handleAdd = () => {
  Object.assign(formData, {
    id: null,
    name: '',
    storeId: '',
    position: '',
    phone: '',
    idCard: '',
    entryDate: '',
    baseSalary: 0,
    status: 'active',
    remark: ''
  })
  dialogVisible.value = true
}

// 查看
const handleView = (row) => {
  ElMessage.info(`查看员工：${row.name}`)
}

// 查看业绩
const handlePerformance = (row) => {
  ElMessage.info(`查看 ${row.name} 的业绩详情`)
}

// 编辑
const handleEdit = (row) => {
  Object.assign(formData, { ...row })
  dialogVisible.value = true
}

// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm(`确定要删除员工 "${row.name}" 吗？`, '提示', {
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
    handleSearch()
  })
}

// 提交表单
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('提交表单:', formData)
      ElMessage.success(formData.id ? '更新成功' : '创建成功')
      dialogVisible.value = false
      handleSearch()
    }
  })
}

// 导入
const handleImport = () => {
  ElMessage.info('批量导入功能开发中')
}
</script>

<style scoped>
.store-staff {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.search-form {
  margin-bottom: 20px;
}

/* 统计卡片 */
.stat-cards {
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 15px;
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.stat-value.active {
  color: #67c23a;
}

.stat-value.new {
  color: #f56c6c;
}

.stat-value.sales {
  color: #409eff;
  font-size: 20px;
}

/* 员工名称单元格 */
.staff-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.staff-name {
  font-weight: 500;
}

.sales-amount {
  color: #f56c6c;
  font-weight: bold;
}

.el-pagination {
  margin-top: 20px;
  justify-content: flex-end;
}
</style>

